//722.650
import React, { Component } from 'react';
import { LoginSty } from "./StyledLogin";
import { withRouter } from 'react-router-dom'


import web from '../../assets/images/login/p_19.png'
import wec from '../../assets/images/login/p_15.png'
import qq from '../../assets/images/login/p_17.png'
import phone from '../../assets/images/login/p_03.png'
import mm from '../../assets/images/login/p_07.png'
import { connect } from 'react-redux'
import { loadDataAsync } from '../../login/actionCreater'

import { Toast,  WingBlank, Button } from 'antd-mobile';


// function handleLoad() {
//   showToastNoMask()
// }
function showToast() {
  Toast.info('密码输入不能为空!!!', 1);
}

function showToastNoMask() {
  Toast.info('用户名或密码输入错误！请重新输入 !!!', 2, null, false);
}

function successToast() {
  Toast.success('登录成功 !!!', 1);
}

// function failToast() {
//   Toast.fail('登录失败 !!!', 1);
// }

// function offline() {
//   Toast.offline('Network connection failed !!!', 1);
// }

// function loadingToast() {
//   Toast.loading('Loading...', 1, () => {
//     console.log('Load complete !!!');
//   });
// }

// const customIcon = () => (
//   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="am-icon am-icon-md">
//     <path fillRule="evenodd" d="M59.177 29.5s-1.25 0-1.25 2.5c0 14.47-11.786 26.244-26.253 26.244C17.206 58.244 5.417 46.47 5.417 32c0-13.837 11.414-25.29 25.005-26.26v6.252c0 .622-.318 1.635.198 1.985a1.88 1.88 0 0 0 1.75.19l21.37-8.545c.837-.334 1.687-1.133 1.687-2.384C55.425 1.99 53.944 2 53.044 2h-21.37C15.134 2 1.667 15.46 1.667 32c0 16.543 13.467 30 30.007 30 16.538 0 29.918-13.458 29.993-30 .01-2.5-1.24-2.5-1.24-2.5h-1.25" />
//   </svg>
// );


@connect(
  (state) => {
    // console.log(state)
    return {
      list: state.login.list
    }
  },
  (dispatch) => ({
    loadData(data) {
      dispatch(loadDataAsync(data))
    }
  })
)
@withRouter
class Log extends Component {
  constructor(props) {
    super(props);
    this.state = {
      password: '',
      email: '',
      waring: 'none',
      parl: ''
    };

    this.handleChange = this.handleChange.bind(this);
    // this.handleLoad = this.handleLoad.bind(this);
    // this.handleSubmit = this.handleSubmit.bind(this);
  }
  componentDidMount() {
    // this.props.loadData()
    // Toast.loading('Loading...', 30, () => {
    //   console.log('Load complete !!!');
    // });

    // setTimeout(() => {
    //   Toast.hide();
    // }, 3000);
  }
  // componentDidMount() {
  //   this.props.loadData()
  // }
  // componentDidUpdate() {
  //     console.log(this.props.list);
  // }


  handleOnblur = (e) => {
    let reg = /^[a-z1-9](?:\w|\-)+@[a-z\d]+\.[a-z]{2,4}$/
    if (!reg.test(e.target.value)) {
      this.setState({ ...this.state, waring: 'block' })
    } else { this.setState({ ...this.state, waring: 'none' }) }
  }



  handleLoad =  () => {
    
      // let data = {
      //   email:'asd',
      //   password:'asdasd',
      // }
      // this.props.loadData(data)
      // console.log("asd")


    if (this.state.email === '' || this.state.password === '') {
      // this.setState({...this.state,parl: '账号密码不能为空'})
      showToast()
    } else if (this.state.waring === 'block') {
      showToastNoMask()
    } else {
      let data = {
        "zhanghao":this.state.email,
        "password":this.state.password,
        "renzheng":1,
        "rememberMe":1
      }
      this.props.loadData(data)


      setTimeout(() => {
        let use = sessionStorage.username
        console.log(use);
        use=JSON.parse(use)
        console.log(use);
        if(use){
          console.log(use);
          successToast()
          let { history } = this.props
          history.push(`/home`)
        }
      }, 1000);

      // successToast()
      // let { history } = this.props
      // history.push(`/home`)
    }
  }


  handleChange = (e) => {
    e.target.type === 'password'
      ? this.setState({ ...this.state, password: e.target.value })
      : this.setState({ ...this.state, email: e.target.value })
  }


  render() {
    return (
      <LoginSty>
        <div className='wrap'>
          <div className='kuang'>
            <h1>登录</h1>
            <ul>
              <li>
                <p style={{ display: `${this.state.waring}`, color: "red" }} >请输入正确的邮箱！！</p>
                <div>
                  <input
                    onBlur={this.handleOnblur}
                    onChange={this.handleChange}
                    name="email"
                    type="text" value={this.state.email}
                    placeholder="请输入您的账号" />
                  <span><img src={`${phone}`} alt="" /></span>
                </div>
              </li>
              <li>
                {/* <p>输入密码</p> */}
                <div>
                  <input
                    onChange={this.handleChange}
                    type="password" value={this.state.password}
                    placeholder="请输入您的密码" />
                  <span><img src={`${mm}`} alt="" /></span>
                </div>
              </li>

            </ul>
            <div><span></span><p>忘记密码？</p></div>
          </div>
        </div>
        <div className='ftr'>
          <div>
            <div><p>O</p><span>记住账号</span></div>
            <div >
              <WingBlank>
                <Button
                  style={{ color: '#fff', backgroundColor: '#308bfe', width: '1.65rem', height: '.5rem', fontSize: '0.175rem', bordeStyle: 'none', borderRadius: '0.05rem' }}
                  onClick={this.handleLoad}>登&nbsp;&nbsp;&nbsp;录</Button>
              </WingBlank>
            </div>
          </div>
        </div>
        <div className='footer'>
          <div>
            <div className="three"><div><hr /></div><span>第三方登录</span><div><hr /></div></div>
            <div className='last'>
              <div><img src={`${qq}`} alt="" /></div>
              <div><img src={`${wec}`} alt="" /></div>
              <div><img src={`${web}`} alt="" /></div>
            </div>
          </div>
        </div>

      </LoginSty>
    );
  }
}
export default Log
